
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/post" style="color: #409eff;">岗位管理</router-link></div>
          --><div class="hei10"></div>

				<div class="team">
						<div class="powertop">
							<router-link class="powertopli" to="/team">我的团队</router-link>
							<router-link class="powertopli powertopact" to="/team/post">岗位管理</router-link>
							<router-link v-if="memid == 50481 || memid == 304676 || memid == 304672" class="powertopli" to="/team/func">功能定义</router-link>
							<router-link v-if="memid == 50481 || memid == 304676 || memid == 304672" class="powertopli" to="/team/api">API定义</router-link>
						</div>
						<div class="powercon">
							<el-button type="primary" plain round style="margin-right: 20px;" @click="newpersonlog = true">新建自定义岗位</el-button>
							<el-button type="primary" plain round style="margin-right: 20px;" @click="newdeplog = true">新建部门</el-button>
						</div>
						<div class="powertable" v-loading="loading">
							<div class="powerlist">
								<div class="powerth">所属部门</div>
								<div class="powerth">岗位名称</div>
								<div class="powerth">岗位描述</div>
								<div class="powerth">操作</div>
							</div>

							<div class="powerlist" v-for="item in list" :key="item.id">

								<div class="powertd">{{item.name}}</div>
								<div class="powertd">
									<div class="powerpostli" v-for="item2 in item.data"  :key="item2.id">{{item2.name}}</div>
								</div>
								<div class="powertd">
									<div class="powerpostli" v-for="item2 in item.data"  :key="item2.id">{{item2.description}}</div>
								</div>
								<div class="powertd" style="border-right: 0;">
									<div class="powerpostli"  v-for="item2 in item.data"  :key="item2.id">
										<el-button type="text" @click="fix(item2.id)">修改权限</el-button>
										<el-button type="text" style="color: #2974FF;" @click="stop(item2.id,item2.name)">删除岗位</el-button>
									</div>
								</div>
							</div>
						</div>

						<el-dialog title="新建岗位" center class="log" :visible.sync="newpersonlog" width="510px">
							<el-form ref="form" @submit.native.prevent :model="newperson" label-width="120px">
								  <el-form-item label="选择部门">
									<el-select v-model="newperson.department" placeholder="请选择部门">
									  <el-option v-for="item in departmentlist" :label="item.name" :key="item.id" :value="item.id"></el-option>
									</el-select>
								  </el-form-item>
								  <el-form-item label="岗位名称">
								  		<el-input v-model="newperson.name"></el-input>
								  </el-form-item>
								  <el-form-item label="岗位描述">
									<el-input type="textarea" v-model="newperson.desc"></el-input>
								  </el-form-item>
							</el-form>
						  <span slot="footer" class="dialog-footer">
							<el-button type="info" round @click="newpersonlog = false">取 消</el-button>
							<el-button type="danger" round @click="newpersongo">确 定</el-button>
						  </span>
						</el-dialog>

						<el-dialog title="新建部门" class="log" :visible.sync="newdeplog" width="510px">
							<el-form ref="form" @submit.native.prevent :model="newperson" label-width="120px">
								  <el-form-item label="部门名称">
								  		<el-input v-model="newdep.newdepname"></el-input>
								  </el-form-item>
							</el-form>
						  <span slot="footer" class="dialog-footer">
							<el-button @click="newdeplog = false">取 消</el-button>
							<el-button type="primary" @click="newdepgo">确 定</el-button>
						  </span>
						</el-dialog>

						<el-dialog title="修改权限" center class="fixpost" :visible.sync="fixpersonlog" width="810px">
						   <!-- <el-tree :data="data" @check="postchoose" show-checkbox></el-tree> -->
							<div>
								<el-collapse v-model="activeNames" accordion>
									  <el-collapse-item v-for="item in lists2" :name="item.id"  :key="item.id" v-if="item.id == 106?false:true">
										<template slot="title"><input type="checkbox" class="checkinput" :value="item.id" v-model="checkList" @change="fixpost"/>{{item.name}}</template>
										<div style="margin-left: 30px;">
											<el-collapse v-model="activeNames" >
												<el-collapse-item v-for="item2 in item.data" :name="item2.id"  :key="item2.id">
													<template slot="title"><input type="checkbox" class="checkinput" :value="item2.id" v-model="checkList" @change="fixpost"/>{{item2.name}}</template>
													<div class="list3" style="margin-left: 4px;">
														<div class="checkul">
															<div class="checkli"  v-for="item3 in item2.data"  :key="item3.id">
																<input type="checkbox" :value="item3.id" v-model="checkList" @change="fixpost"/>{{item3.name}}
															</div>
														</div>
													</div>
												</el-collapse-item>
											</el-collapse>
										</div>
									  </el-collapse-item>
								</el-collapse>
							</div>
							<span slot="footer" class="dialog-footer">
								<el-button type="info" round @click="fixpersonlog = false">取 消</el-button>
								<el-button type="danger" round @click="fixpersongo">保存</el-button>
							</span>
						</el-dialog>

					</div>
			</div>
		</div>
		<!-- <foot></foot> -->
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name : "post",
		data(){
			return {
				data:[],
				loading:true,

				newpersonlog:false,
				newperson:{
					name:"",
					department:"",
					desc:""
				},
				fixpersonlog:false,
				fixperson:{
					name:"",
					department:"",
					desc:""
				},
				newdeplog:false,
				newdep:{
					level:2,
					newdepname:""
				},

				list:[],
				datas:[],
				lists:{},
				lists2:{},
				departmentlist:[],

				ids:[],

				activeNames:["1"],
				checkList:[],
				chooseid:"",

                superman:false,
                shop_id:""
			}
		},
		created() {
            axios.get('/api/gth/user/shop')
                .then(response => {
                    if(response.data.msg.code == 0){
                        this.shop_id = response.data.data.shop_id
                    }else{
                        if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                        that.$message.error(response.data.msg.info);
                    }
                })
			//权限问题
			var user = JSON.parse(localStorage.getItem('USER'));
            if(this.shop_id == 50481 || this.shop_id == 304676){
                this.superman = true
			}

			var shop = JSON.parse(localStorage.getItem('USER'));
			this.memid = shop.id
		},
		mounted(){
			this.getdepartment()
			this.getlist()
			// this.getlists()
			this.getlists2()
		},
		methods: {
			//新建部门
			newdepgo:function(){
				var params = new URLSearchParams();
				params.append('level',2);
				params.append('name',this.newdep.newdepname);
				axios.post('/api/plan-market/permission/add', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.newdeplog = false
							this.getdepartment();
                            this.$message({
                            	type: 'success',
                            	message: '部门创建成功!'
                            });
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//绑定权限
			fixpost:function(){
				console.log(this.checkList)
			},
			//获取部门
			getdepartment:function(){
				axios.get('/api/plan-market/permission/list?level=2')
					.then(response => {
						if(response.data.msg.code == 0){
							this.departmentlist = response.data.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//获取岗位
			getpost:function(){
				axios.get('/api/plan-market/permission/list?level=3&parent_id='+this.newperson.department)
					.then(response => {
						if(response.data.msg.code == 0){
							this.postlist = response.data.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//获取功能列表
			getlists2:function(){
				axios.get('/api/functions/lists?new=1')
					.then(response => {
						this.lists2 = response.data.data
					})
			},
			//获取功能列表
			getlists:function(){
				axios.get('/api/functions/lists?new=1')
					.then(response => {
						if(response.data.msg.code == 0){
							this.lists = response.data.data
							this.loading = false
							var sj = response.data.data
							var ch = []
							for( var i in sj){
								var ch2 = []
								var obj1 = {id:sj[i].id,label:sj[i].name,children:ch2}
								var sj2 = sj[i].data
								for( var i2 in sj2){

									var ch3 = []
									var obj2 = {id:sj2[i2].id,label:sj2[i2].name,children:ch3}
									var sj3 = sj2[i2].data
									for( var i3 in sj3){
										var obj3 = {id:sj3[i3].id,label:sj3[i3].name}
										ch3.push(obj3)
									}
									ch2.push(obj2)
								}
								ch.push(obj1)
							}
							this.data = ch
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//获取列表
			getlist:function(){
				axios.get('/api/plan-market/ros/list')
					.then(response => {
						if(response.data.msg.code == 0){
							this.list = response.data.data
							console.log(this.list)
							this.loading = false
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},

			//选择权限
			postchoose:function(data){
				// if(!data.children){
				// 	if(this.ids.indexOf(data.id)>0){
				// 		this.ids.splice(this.ids.indexOf(data.id),1)
				// 	}else{
				// 		this.ids.push(data.id)
				// 	}
				// }
				console.log(data)
			},
			//删除岗位
			stop:function(id,name){
				this.$confirm('删除"'+name+'"岗位，会影响该岗位下所有员工的使用，是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					var params = new URLSearchParams();
					params.append('id',id);
					axios.post('/api/plan-market/permission/delete', params)
					  .then(response => {
							if(response.data.msg.code == 0){
								this.loading = true
								this.$message({
									type: 'success',
									message: '删除岗位成功!'
								});
								this.getlist()
							}else{
								this.$message.error(response.data.msg.info);
							}
					  })
				})
			},
			//修改账户信息
			fixpersongo:function(){
				axios.post('/api/permission/func', {permission_id:this.chooseid,func_ids:this.checkList})
				  .then(response => {
						if(response.data.msg.code == 0){
							this.fixpersonlog = false
							this.checkList = ""
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//修改权限
			fix:function(id){
				this.fixpersonlog = true
				this.chooseid = id

				axios.get('/api/functions/permission/list?id='+id)
					.then(response => {
						if(response.data.msg.code == 0){
							this.checkList = ""
							var arr = []
							for( var i in response.data.data){
								arr.push(response.data.data[i].func_id)
							}
							this.checkList = arr
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//新建岗位
			newpersongo:function(){
				var params = new URLSearchParams();
				params.append('level',3);
				params.append('parent_id',this.newperson.department);
				params.append('name',this.newperson.name);
				params.append('description',this.newperson.desc);
				axios.post('/api/plan-market/permission/add', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.newpersonlog = false
							this.loading = true
							this.getlist();
                            this.$message({
                            	type: 'success',
                            	message: '岗位创建成功!'
                            });
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
  .log input{ width: 250px !important;}
  /deep/ .fixpost .el-collapse-item__header{ width: 200px; line-height: 40px; height: 40px; border: none;}
  /deep/ .fixpost .el-collapse{ border: none;}
  /deep/ .fixpost .el-collapse-item__wrap{ border: none;}
  /deep/ .fixpost .el-collapse-item__arrow{ line-height: 40px;}
  /deep/ .fixpost .el-collapse-item__content{ padding-bottom: 0;}
	.team{ }
	/deep/ .el-button--danger {
	     color: #FFF;
	     background-color: #2974FF;
	     border-color: #2974FF;
	 }

	.powertop {
	  display: flex;
	  background:#f9f9f9;
	}

	.powertopli {
	  flex-basis: 180px;
	  line-height: 50px;
	  border-bottom: 3px #F9F9F9 solid;
	  color: #727272;
	  border-right: 1px #F9F9F9 solid;
	  font-size: 16px;
	  text-align: center;
	}

	.powertopact {
	  background: #FFFFFF;
	  border-bottom: 3px #2974FF solid;
	}

	.powercon{ background: #FFFFFF; padding: 20px 40px; justify-content: space-between; display: flex;}
	.powerbtn{ flex-basis: 320px; display: flex;}
	.powersearch{ flex-basis: 250px;}
	.powerlist{ display: flex; text-align: center; padding: 0 20px;
        	line-height: 60px; }
	.powerth{ flex: 1; background: rgb(246, 246, 246); color: rgb(86, 86, 86); font-size: 14px; border-right: 1px #EAEAEA solid; line-height: 45px;}
	.th1{ flex-basis: 80px; max-width: 80px;}
	.powertd{ flex: 1; display: flex; flex-wrap: wrap; color: #888888; background: #FFFFFF;
	font-size: 14px; border-bottom: 1px #EAEAEA solid;border-right: 1px #EAEAEA solid; align-items: center; justify-content: center;}
	.fenye{ text-align: right; margin: 20px 0;}
	.powerpostli{width: 100%; line-height: 41px; padding: 5px; height: 51px; overflow: hidden; border-bottom: 1px #EAEAEA solid; margin-bottom: -1px;}
	.checkul{ display: flex; flex-wrap: wrap;}
	.checkli{ margin-left: 20px; line-height: 30px; color: #666;}
	.checkli input{ margin-right: 5px; position: relative; top: 2px;}
	.powerlistli{ font-size: 14px; border: none;}
	.checkinput{ margin-right: 5px; position: relative; top: 2px;}
</style>

